<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <base th:href="${#request.getContextPath()}+'/'">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap/css/bootstrap.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap-table/bootstrap-table.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/skin/default/skin.css}" id="skin"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/css/style.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}"/>
</head>
<body>
<nav class="breadcrumb" style="margin-bottom: 5px"><i class="fa fa-cog"></i> 系统管理  <span
        class="c-gray en">&gt;</span> 挂号费管理 <span
        class="c-gray en">&gt;</span> 挂号费列表
</nav>

<div class="page-container" style="padding: 0 20px">
    <span id="toolbar">
        <shiro:hasPermission name="registration:insert">
            <a href="javascript:;" onclick="registration_insert()"
               class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加挂号</a>
        </shiro:hasPermission>
    </span>


    <div id="operateDiv" style="display: none;">
        <shiro:hasPermission name="registration:update">
            <a title="编辑" href="javascript:;" id="registration_edit" value="" onclick="registration_edit(this)" style="text-decoration:none"><i class="Hui-iconfont"></i></a>
        </shiro:hasPermission>
        <shiro:hasPermission name="registration:delete">
            <a title="删除"  href="javascript:;" id="registration_delete" value="" onclick="registration_del(this)" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>
        </shiro:hasPermission>
    </div>


    <!--bootstrap-table-->
    <table id="dataTable"></table>

</div>
<script type="text/javascript" th:src="@{/lib/jquery/1.11.3/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" th:src="@{/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" th:src="@{/h-ui.admin/js/H-ui.admin.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap-table/bootstrap-table-zh-CN.min.js}"></script>


<script type="text/javascript">
    $(function () {
        /*初始化bootstrap-table表格插件*/
        $('#dataTable').bootstrapTable({
            detailView: true,//+显示详情
            url: 'registration/list', //加载数据地址
            pagination: true,//是否显示分页条
            search: true,//是否显示搜索框
            toolbar: "#toolbar",//顶部显示的工具条（添加和批量删除的）
            contentType: 'application/x-www-form-urlencoded',//条件搜索的时候ajax请求给后台数据的数据类型（条件搜索post提交必须设置）
            pageNumber: 1,//默认的页面 第一页
            pageSize: 10,//默认的每页条数
            pageList: [10, 25, 50, 100],//每页能显示的条数
            sidePagination: "server",//是否是服务器分页，每次请求都是对应的10条数据，下一页发送ajax请求
            paginationHAlign: 'right', //底部分页条
            /*列*/
            columns: [
                {checkbox: true},//是否显示前台的复选框（多选）
                {
                    field: 'registrationId', //后台返回的json格式的key
                    title: '序号' //显示给用户的标题
                }, {
                    field: 'registrationType',
                    title: '挂号类型'
                },
                {
                    field: 'subMoneyItem',
                    title: '子费用项'
                }
                , {
                    field: 'registerationMoney',
                    title: '金额(元)'
                },
                {
                    field: 'registerationTotalMoney',
                    title: '总费用'
                },
                {
                    field: 'registrationId',
                    title: '操作',
                    align: 'center',
                    //格式化列
                    formatter: getOperateBtns
                }
            ],
            /*条件搜索和分页ajax出发传递参数设置
            * 匿名函数就是每次分页或者搜索触发函数
            * 返回值就是要传递给后台的参数
            * params内置的默认参数
            * 开发者可以根据需求在函数内部组装参数传递给后台
            * */
            queryParams: function (params) {
                console.log(params);

                var paramsData = {
                    pageNum: params.offset / params.limit + 1,
                    pageSize: params.limit,
                    keyword: params.search
                };

                return paramsData;

            },

            /* 当点击+触发事件
            *
            * index ：行号
            * row ：当前行的数据
            * $detail : bootStrapTable 表格
            *  创建订单子表思路
            *  使用$detail对象，在当前行下面创建新列，在列中创建一个新表格，在使用BootStrapTable再次根据
            *  当前行的订单id发送请求从后台查询出当前订单的订单数据，展现成一个BootStrapTable表格即可
            *
            * */
            onExpandRow: function (index, row, $detail) {
                //获取当前展开行对应的 订单id
                var registrationId = row.registrationId;

                //创建一个表格，用户点击+号时候马上创建一个表格（子表），用于添加详细数据
                var cur_table = $detail.html('<table></table>').find('table');

                //把子表变成bootstra-table
                $(cur_table).bootstrapTable({
                    url: 'registration/detail',
                    method: 'get',
                    contentType: 'application/json;charset=UTF-8',//这里我就加了个utf-8
                    dataType: 'json',
                    queryParams: {registrationId: registrationId},
                    pageSize: 10,//默认的每页条数
                    pagination: true,//显示分页条
                    columns: [{
                        field: 'registrationDetailId',
                        title: '序号'
                    }, {
                        field: 'subMoneyName',
                        title: '子费用名称'
                    }, {
                        field: 'subMoney',
                        title: '子费用'
                    }]
                });

            }

        });
    })

    /**
     *  value: the field value. adminId的值
     row: the row record data. 当前行的数据
     index: the row index. 行号索引从0开始
     field: the row field. 当前field的名称 adminId

     函数直接返回一个html字符串，自动渲染出效果
     */
    function getOperateBtns(value, row, index) {
        var html = "";
        $("#operateDiv").find("a").each(function(){
            var myA=$(this).clone()
            myA.attr("value",row.registrationId)
            html += myA.prop("outerHTML")+ "&nbsp;&nbsp;&nbsp;&nbsp;";

        });

        return html;
    }
</script>

<script type="text/javascript">
    /*
        参数解释：
        title	标题
        url		请求的url
        id		需要操作的数据id
        w		弹出层宽度（缺省调默认值）
        h		弹出层高度（缺省调默认值）
    */
    /*挂号表-增加*/
    // function registration_add(title, url, w, h) {
    //     layer_show(title, url, w, h);
    // }

    // /*挂号表-删除*/
    function registration_del(obj) {

        var registrationId=obj.getAttribute("value")
        layer.confirm('确认要删除吗？', {icon: 3, title: '温馨提示'}, function (index) {


            $.get("registration/delete?registrationId=" + registrationId, function (data) {

                layer.msg(data.msg, {
                    icon: data.code,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function () {
                    //如果删除生成code==1 刷新BootStrapTable表格，失败就刷新
                    if (data.code == 1) {
                        refreshTable();
                    }
                });

            })

        });
    }


    /*刷新表格函数*/
    function refreshTable() {
        //BootStrapTable刷新表格的方法
        $("#dataTable").bootstrapTable('refresh');
    }


    /*挂号表-新增跳转*/
    function registration_insert() {

        layer.open({
            type: 2,
            title: "新增",
            shade: [0],
            maxmin: true,
            area: ['800px', '500px'],
            content: "registration/registrationEdit", //iframe的url，no代表不显示滚动条
        });

    }


    /*挂号表-修改跳转*/
    function registration_edit(obj) {
        var registrationId=obj.getAttribute("value")
        layer.open({
            type: 2,
            title: "修改",
            shade: [0],
            maxmin: true,
            area: ['800px', '500px'],
            content: "registration/registrationEdit?registrationId=" + registrationId, //iframe的url，no代表不显示滚动条
        });

    }

</script>
</body>
</html>